<template>
  <div class="index-page">
    <div class="header">每日一看</div>
    <div class="mui-flex nav-top">
      <div class="cell" v-for="(item, index) in nav_list" :key="index" @click="satinGodAction(item.type, index)">
        <span class="nav-list" :class="{'active': index == global_key}">{{ item.name }}</span>
        <div :class="{'active-line': index == global_key}"></div>
      </div>
    </div>

    <div class="index-list-box">
      <div class="index-list" v-for="(item, index) in list_data" :key="index">
        <div class="over-hide list-author">
          <img v-lazy="item.header" alt="" class="author-avatar">
          <span class="author-name">{{item.username}}</span>
        </div>

        <div class="list-title">{{item.text}}</div>

        <div class="mui-flex video-group" v-if="item.type === 'video'">
          <div class="cell">
            <img v-lazy="item.thumbnail" class="poster-img" alt="">
            <img src="../assets/images/start-icon.png" class="start-icon" alt="">
          </div>
        </div>

        <a class="img-group" v-else-if="item.type === 'image'">
          <img v-lazy="item.image" alt="">
        </a>

        <div class="gif-group" v-else-if="item.type === 'gif'">
          <img v-lazy="item.gif" alt="">
        </div>

        <div class="index-clear"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getsatinGod } from '@/api/index';
  import { Indicator } from 'mint-ui';
  export default {
    data() {
      return {
        nav_list: [
          {name: '推荐', type: '1', key: 1},
          {name: '视频', type: '5', key: 2},
          {name: '图片', type: '3', key: 3},
          {name: 'GIF', type: '4', key: 4},
          {name: '文字', type: '2', key: 5}
        ],
        page: 1,
        global_key: 0,
        list_data: [],
      }
    },
    mounted() {
      this.satinGodAction('1');
    },
    methods: {
      satinGodAction(type, key) {
        key = key || 0;
        let that = this, page = that.page;
        that.global_key = key;

        Indicator.open('加载中...');

        getsatinGod(type, page).then(res => {
          if (res.data.code === 200) {
            that.list_data = res.data.data;
            Indicator.close();
          }
        }).catch(error => {
          Indicator.close();
        })
      },
    },
  }
</script>

<style lang="less">
  .index-page {
    .header{
      height: 50px;
      background-color: #008de1;
      font-size: 18px;
      color: #fff;
      text-align: center;
      line-height: 50px;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 999;
    }
    .nav-top{
      position: fixed;
      top: 50px;
      width: 100%;
      background-color: #fff;
      z-index: 999;
      box-shadow: 0 2px 2px rgba(0,0,0,.07);
    }
    .nav-top .cell {
      .nav-list{
        padding: 10px 0;
        text-align: center;
        display: block;
        font-size: 14px;
        width: 32px;
        margin: 0 auto;
        position: relative;
      }
      .active{
        color: #008de1;
      }
      .active-line{
        position: absolute;
        left: 50%;
        margin-left: -16px;
        bottom: 5px;
        width: 32px;
        height: 2px;
        background-color: #008de1;
      }
    }
    .index-list-box{
      margin: 110px auto 0;
      .index-list{
        margin-bottom: 10px;
      }
      .list-author{
        margin-bottom: 10px;
        .author-avatar{
          width: 40px;
          height: 40px;
          display: block;
          float: left;
          border-radius: 50%;
          margin-left: 10px;
          margin-right: 10px;
        }
        .author-name{
          line-height: 40px;
          float: left;
          font-weight: bold;
          font-size: 14px;
        }
      }
      .list-title{
        font-size: 14px;
        padding: 0 10px 5px 10px;
        line-height: 22px;
      }
      .video-group{
        position: relative;
        .poster-img{
          width: 100%;
          max-height: 200px;
          display: block;
        }
        .start-icon{
          width: 50px;
          height: 50px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -25px;
          margin-top: -25px;
        }
      }
      .img-group img{
        display: block;
        width: 100%;
      }
      .gif-group img{
        margin: 0 auto;
        display: block;
      }
    }
  }
</style>
